<template>
  <section class="bg-gray-fa lg:pt-20 pt-8 lg:pb-[120px] pb-8 px-[10px]">
    <div class="container mx-auto text-center">
      <div class="lg:text-3xl text-xl text-gray-33 font-bold">
        一站式智能视频分析与应用平台，外挂式升级AI应用
      </div>
      <div class="lg:mt-5 mt-2 lg:text-lg text-sm text-gray-66">
        快速配置算法应用，实时查看AI效果，可微信接收报警信息，支持目标检测、越线统计等多种应用
      </div>
      <div class="mt-10 lg:block hidden gs_reveal gs_reveal_fromBottom">
        <el-carousel
          indicator-position="outside"
          :height="height"
          :type="type"
          :autoplay="false"
        >
          <el-carousel-item>
            <img class="w-full" src="@/assets/img/demo.png" alt="" />
          </el-carousel-item>

          <el-carousel-item>
            <img class="w-full" src="@/assets/img/demo2.jpg" alt="" />
          </el-carousel-item>

          <el-carousel-item>
            <img class="w-full" src="@/assets/img/demo3.jpg" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="lg:hidden block">
        <van-swipe class="mt-5 pb-10" :autoplay="5000" indicator-color="red">
          <van-swipe-item class="" v-for="item in 3" :key="item">
            <img src="@/assets/img/demo.png" class="w-full" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <info-btn class="lg:flex hidden">立即试用平台</info-btn>
    </div>
  </section>
</template>

  <script>
export default {
  data() {
    return {
      type: "card",
      height: "405px",
    };
  },
  created() {
    if (this.isMobile()) {
      this.type = "";
      this.height = "200px";
    }
  },
};
</script>
  
<style scoped>
/deep/ .el-carousel__item--card.is-active {
  left: -53px;
}
/deep/ .el-carousel__item--card {
  width: 60%;
}

/deep/ .van-swipe__indicators {
  /* bottom: 2px; */
}
/deep/ .van-swipe__indicator {
  width: 32px;
  height: 3px;
  background-color: #c41719;
  border-radius: 0;
}
</style>